<template>
  <div class="home">
   
      <div class="main" >
        <img src="../assets/img/bike-banner.jpg" alt="">
        <div class="search">
          <keyword-select/>
        </div>        
      </div>
      <div class="explain">
        <div class="title">
          <h1 class="explain_title_h">How it Works?</h1>
        </div>
        <div class = 'explain_row'>
            <div class="col-1">
              <i></i>
              <h4>Login and Register </h4>
              <p></p>
            </div>
            <div class="col-2">
              <i></i>
              <h4>Login and Register </h4>
              <p></p>
            </div>
            <div class="col-3">
              <i></i>
              <h4>Login and Register </h4>
              <p></p>
            </div>
        </div>
      </div>

      <div class="style">
          <div class="title">
            <h1>Most Popular Brands</h1>
          </div>
          <div>
        
          <div class="hotBrand">
            <div class="brand1"  v-for="(item,index) in brangImg" :key="index" @click="brandSelect(item.name)">
                <img :src="item.imgUrl" alt="">
                <div class="name">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="reason">
        <div class="title">
          <h1>Why Choose US?</h1>
        </div>
        <div class="reason_list">
          <div class="reason-col">
            <div class="icon"></div>
            <div class="reason_des"></div>
          </div>
          <div class="reason-col"></div>
          <div class="reason-col"></div>
          <div class="reason-col"></div>
        </div>
      </div>

      <div class="askque">
        <div class="title">
          <h1>Ask & Questions</h1>
        </div>
        <div class="title_list">
          <div class="title_col"></div>
          <div class="title_col"></div>
          <div class="title_col"></div>
          <div class="title_col"></div>
          <div class="title_col"></div>
          <div class="title_col"></div>
          <div class="title_col"></div>
          <div class="title_col"></div>
        </div>
        
      </div>
   
  </div>
</template>

<script>
import {getBicycleInfo,brandSearch} from '@/networdk/user'


import keywordSelect from '@/views/Home/Select/keywordSelect.vue'
export default {
  name:'Home',
  data() {
    return {     
      brangImg:[
        {
          imgUrl:require('@/assets/img/brand/爱玛.jpg'),
          name:'爱玛'
        },
        {
          imgUrl:require('@/assets/img/brand/立马.jpg'),
          name:'立马'
        },
        {imgUrl:require('@/assets/img/brand/绿源.png'),name:'绿源'},
        {imgUrl:require('@/assets/img/brand/速珂.png'),name:'速珂'},
        {imgUrl:require('@/assets/img/brand/台铃.png'),name:'台铃'},
        {imgUrl:require('@/assets/img/brand/小刀.jpg'),name:'小刀'},
        {imgUrl:require('@/assets/img/brand/小牛.jpg'),name:'小牛'},
        {imgUrl:require('@/assets/img/brand/新日.png'),name:'新日'},
        {imgUrl:require('@/assets/img/brand/雅迪.png'),name:'雅迪'},
        {imgUrl:require('@/assets/img/brand/净原.jpg'),name:'净原'},
      ],
      currentBrand:''
      
    }
  },
  components:{
    keywordSelect
  },
  methods: {
    
    brandSelect(i){
      console.log('点击了按钮');
      console.log(i);
      // console.log(this.currentBrand);
      let brand = i
      brandSearch({brand}).then(res=>{
        console.log('进入了按需查找页面');
        console.log(res);
        this.$router.push({
          path:'/searchbicycle',
          query:{

          }
        })
        
      })
    }
  },
}
</script>

<style lang='less' scoped>

.hotBrand{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 1200px;
  height: 500px;
  margin:auto;
  
  margin: 50px 134px;
  // border: px solid red;
}
.brand1{
  width: 200px;
  height: 200px;
  border: 1px solid red;
  border-radius: 50%;
  position: relative;
  margin-right: 30px;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .name{
    position: absolute;
    left: 80px;
    bottom: 9px;
    font-size: 19px;
    color:white;
    font-weight: bold;
  }
}
.main{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
img{
  width: 100%;
  height: 548px;
}
.search{
  position: absolute;
  bottom: -87px;
  height: 187px;
  width: 1116px;
  background-color: snow;
  border-radius: 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
 
  
  
}

.explain{
  height: 412px;
  background-color: #e9ecef;
  margin-top: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  

  .explain_row{
    border: 1px solid red;
    width: 1116px;
    height: 304px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    div[class^=col]{
      width: 304px;
      margin-left: 10px;
    }
  }
  
}
.title{
    height: 68px;  
    width: 1116px;  
    
    text-align: center;
    margin: 0 auto;
    
    h1{
      font-size: 50px;
    }
  }

.style{
  // height: 1000px;
  border: 1px solid rebeccapurple;
  .brand{
    
    margin: 0 50px;
    border: 1px solid red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    .brand_col{
      border-radius: 50%;
      width: 379px;
      height: 439px;
      border: 1px solid red;
      margin:10px 0;

      .img{
        height: 300px;
        img{
          width: 100%;
          height: 100%;

        }
      }
      .description{
        width: 355px;
        height: 172px;
        // border: 1px solid red;
        margin:0 auto;
        margin-top: 40px;
        // margin: 40px auto;

        .des_top{
          // height: 102px;
          width: 305px;
          margin: 0 auto;
          font-size: 20px;
          // border: 1px solid rebeccapurple;
        }
        .des_bottom{
          width: 305px;
          height: 50px;
          margin-top:20px;
          .onBicycle{
            width: 300px;
          }
          // margin: 0 auto;
          // border: 1px solid rebeccapurple;
        }
      }
    }
  }
}

.reason{
  height: 636px;
  border: 1px solid red;
  
  .reason_list{
   
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .reason-col{
      width: 546px;
      height: 240px;
      border: 1px solid red;
      margin: 10px 10px;

      display: flex;
      justify-content: center;
      align-items: center;
      .icon{
        width: 120px;
        height: 120px;
        border: 1px solid red;
      }
      .reason_des{
        width: 316px;
        height: 108px;
        border: 1px solid red;
      }
    }
  }
  
}

.askque{
  height: 394px;
  border: 1px solid red;

  .title_list{
    display:  flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    .title_col{
      width: 546px;
      height: 70px;
      border: 1px solid red;
      margin: 0 auto;
    }
  }
}
</style>